<template>
  <aside class="admin-sidebar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      background-color="#34495e"
      text-color="#b7c0cd"
      active-text-color="#fff"
      router
    >
      <el-menu-item index="/admin/dashboard">
        <el-icon><pie-chart /></el-icon>
        <span>控制面板</span>
      </el-menu-item>
      <el-menu-item index="/admin/products">
        <el-icon><goods /></el-icon>
        <span>商品管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/users">
        <el-icon><user /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/orders">
        <el-icon><document /></el-icon>
        <span>订单管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/messages">
        <el-icon><chat-dot-round /></el-icon>
        <span>消息管理</span>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  PieChart,
  Goods,
  User,
  Document,
  ChatDotRound
} from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = ref(route.path)

watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
})
</script>

<style scoped>
.admin-sidebar {
  width: 220px;
  height: 100vh;
  background-color: #34495e;
  position: fixed;
  left: 0;
  top: 60px;
  z-index: 100;
  padding-top: 60px;
  transition: all 0.3s;
}

.el-menu-vertical {
  border-right: none;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 220px;
}
</style>